<script setup lang="ts">
import { reactive } from 'vue';
import { CirclePlus, Edit, Delete } from '@element-plus/icons';
import { buildTreeData } from '@whjxtech/jxtech-component';
import jxudpStationServiceApi from '/@/api/org/bean/jxudp-station';
import JxudpStationFormDialog from './jxudp-station-form-dialog.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
const JxudpStationTreeTableState = reactive({
  data: [] as any[],
  indexMethod: (index: number) => index + 1,
  loadTreeTableData() {
    jxudpStationServiceApi.queryList().then((res) => {
      const pkArr = res.data.map((item) => item.stationId as string);

      const parentData = res.data.filter((item) => {
        return item.superStationId === '0' || pkArr.indexOf(item.superStationId) == -1;
      });
      JxudpStationTreeTableState.data = buildTreeData(
        parentData,
        res.data,
        'stationId',
        'superStationId'
      );
    });
  },
  onAddButtonClick(row: any) {
    JxudpStationTreeTableState.addJxudpStation(row.stationId, row.stationName);
  },
  onEditButtonClick(row: any) {
    JxudpStationFormDialogState.stationId = row.stationId;
    JxudpStationFormDialogState.superStationId = '';
    JxudpStationFormDialogState.superStationName = '';
    JxudpStationFormDialogState.openDialog();
  },
  onDeleteButtonClick(row: any) {
    const pkList = [row.stationId];
    ElMessageBox.confirm('此操作将永久删除此岗位, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      lockScroll: false,
    })
      .then(() => {
        jxudpStationServiceApi.saveMultiDelete(pkList).then(() => {
          JxudpStationTreeTableState.loadTreeTableData();
          ElMessage.success({ message: '岗位删除成功', type: 'success' });
        });
      })
      .catch(() => {
        ElMessage({ type: 'info', message: '已取消删除' });
      });
  },
  addJxudpStation(superStationId: string, superStationName: string) {
    JxudpStationFormDialogState.stationId = '';
    JxudpStationFormDialogState.superStationId = superStationId;
    JxudpStationFormDialogState.superStationName = superStationName;
    JxudpStationFormDialogState.openDialog();
  },
});

const JxudpStationFormDialogState = reactive({
  visible: false,
  stationId: '',
  superStationId: '',
  superStationName: '',
  openDialog() {
    JxudpStationFormDialogState.visible = true;
  },
  onSaveSuccess() {
    JxudpStationTreeTableState.loadTreeTableData();
  },
});

defineExpose({
  loadTreeTableData: () => JxudpStationTreeTableState.loadTreeTableData(),
});
</script>
<template>
  <jxtech-basic-card title="岗位管理">
    <template #titleExtra>
      <jxtech-add-button
        @click="JxudpStationTreeTableState.addJxudpStation('0', '')"
      ></jxtech-add-button>
    </template>
    <el-table
      ref="ElTableRef"
      :data="JxudpStationTreeTableState.data"
      row-key="stationId"
      border
      size="small"
    >
      <el-table-column
        align="center"
        type="index"
        label="序号"
        width="80px"
        :index="JxudpStationTreeTableState.indexMethod"
      />
      <el-table-column prop="stationName" label="岗位名称" />
      <el-table-column align="center" label="操作" width="300px">
        <template #default="scope">
          <div class="jxudp-station-table-control">
            <span @click="JxudpStationTreeTableState.onAddButtonClick(scope.row)">
              <el-icon color="#409eff">
                <circle-plus />
              </el-icon>
            </span>
            <span @click="JxudpStationTreeTableState.onEditButtonClick(scope.row)">
              <el-icon color="#67c23a">
                <edit />
              </el-icon>
            </span>
            <span @click="JxudpStationTreeTableState.onDeleteButtonClick(scope.row)">
              <el-icon color="#f56c6c">
                <delete />
              </el-icon>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <JxudpStationFormDialog
      v-if="JxudpStationFormDialogState.visible"
      v-model:visible="JxudpStationFormDialogState.visible"
      :station-id="JxudpStationFormDialogState.stationId"
      :super-station-id="JxudpStationFormDialogState.superStationId"
      :super-station-name="JxudpStationFormDialogState.superStationName"
      @save-success="JxudpStationFormDialogState.onSaveSuccess"
    >
    </JxudpStationFormDialog>
  </jxtech-basic-card>
</template>
<style scoped lang="scss">
:deep(.el-table__row) {
  .el-table__cell:first-child {
    .el-table__placeholder {
      display: none;
    }
  }
}
.jxudp-station-table-control {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;

  > span {
    cursor: pointer;
    margin-left: 16px;
  }
}
</style>
